<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微信公众号文章抓取工具</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h1 class="mb-4">微信公众号文章抓取工具</h1>
    
    <!-- 添加公众号表单 -->
    <div class="card mb-4">
      <div class="card-header">
        <h5 class="card-title mb-0">添加公众号</h5>
      </div>
      <div class="card-body">
        <form action="/accounts" method="POST">
          <div class="row g-3">
            <div class="col-md-4">
              <input type="text" class="form-control" name="name" placeholder="公众号名称" required>
            </div>
            <div class="col-md-4">
              <input type="text" class="form-control" name="biz" placeholder="公众号biz参数" required>
            </div>
            <div class="col-md-3">
              <input type="text" class="form-control" name="description" placeholder="描述（可选）">
            </div>
            <div class="col-md-1">
              <button type="submit" class="btn btn-primary w-100">添加</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- 公众号列表 -->
    <div class="card mb-4">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">公众号列表</h5>
        <form action="/crawl" method="POST" class="m-0">
          <button type="submit" class="btn btn-success">开始抓取</button>
        </form>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>名称</th>
                <th>描述</th>
                <th>最后抓取时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <% accounts.forEach(account => { %>
                <tr>
                  <td><%= account.name %></td>
                  <td><%= account.description || '-' %></td>
                  <td><%= account.lastCrawlTime ? new Date(account.lastCrawlTime).toLocaleString() : '未抓取' %></td>
                  <td>
                    <form action="/accounts/<%= account._id %>/delete" method="POST" class="d-inline">
                      <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('确定要删除该公众号吗？')">删除</button>
                    </form>
                  </td>
                </tr>
              <% }) %>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 最新文章列表 -->
    <div class="card">
      <div class="card-header">
        <h5 class="card-title mb-0">最新文章</h5>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>标题</th>
                <th>作者</th>
                <th>公众号</th>
                <th>发布时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <% articles.forEach(article => { %>
                <tr>
                  <td><%= article.title %></td>
                  <td><%= article.author %></td>
                  <td><%= article.publicAccount %></td>
                  <td><%= new Date(article.publishDate).toLocaleString() %></td>
                  <td>
                    <a href="<%= article.url %>" target="_blank" class="btn btn-primary btn-sm">查看</a>
                  </td>
                </tr>
              <% }) %>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>